<template>
    <div
        class="el-card"
        :class="[shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow', isCollapseSelf ? 'is-collapse' : '']"
    >
        <div v-if="$slots.header || header" class="el-card__header">
            <slot name="header">{{ header }}</slot>
        </div>
        <!--  :class="{ 'is-collapse': isCollapseSelf }" -->
        <div :id="cardBodyDom" class="el-card__body" :style="bodyStyle">
            <slot />
        </div>
    </div>
</template>

<script>
import anime from 'animejs/lib/anime.es.js'
import { ElCard } from 'element-plus'

export default {
    name: 'ElCardCollapse',
    extends: ElCard,
    props: {
        header: { type: String },
        bodyStyle: { type: String },
        shadow: {
            type: String
        },
        isCollapse: {
            type: Boolean,
            default: false
        },
        cardBodyDom: {
            type: String,
            default: ''
        },
        buttonDom: {
            type: String,
            default: ''
        },
        svgArrowDom: {
            type: String,
            default: ''
        },
        iconDom: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isCollapseSelf: this.isCollapse,
            tl: ''
        }
    },
    watch: {
        isCollapse(value) {
            this.isCollapseSelf = value
            this.handleChangeCollapse()
        }
    },

    mounted() {
        this.tl = anime.timeline({
            easing: 'easeInOutQuart',
            autoplay: false
        })

        this.$nextTick(() => {
            setTimeout(() => {
                const cardBodyDom = document.getElementById(this.cardBodyDom)
                const buttonDom = document.getElementById(this.buttonDom)
                const svgArrowDom = document.getElementById(this.svgArrowDom)
                const iconDom = document.getElementById(this.iconDom)

                const height = cardBodyDom.offsetHeight

                this.tl
                    .add({
                        targets: cardBodyDom,
                        height: [height, 0],
                        duration: 350
                    })
                    .add(
                        {
                            targets: iconDom,
                            opacity: [1, 0],
                            duration: 400
                        },
                        '-=400'
                    )
                    .add(
                        {
                            targets: buttonDom,
                            opacity: [0, 1],
                            duration: 400
                        },
                        '-=400'
                    )
                    .add(
                        {
                            targets: svgArrowDom,
                            duration: 300,
                            translateX: ['-50%', '-50%'],
                            translateY: ['-50%', '-50%'],
                            rotate: ['0deg', '180deg']
                        },
                        '-=300'
                    )
                /* .add(
                    {
                        targets: ".card-item",
                        translateY: [20, 0],
                        opacity: [0, 1],
                        duration: 300,
                        delay: (el, i, l) => i * 120
                    },
                    "-=275"
                ); */
            }, 300)
        })
    },

    methods: {
        handleChangeCollapse() {
            if (this.tl.began) {
                this.tl.reverse()
                if (
                    this.tl.progress === 100 &&
                    this.tl.direction === 'reverse'
                ) {
                    this.tl.completed = false
                }
            }

            if (this.tl.paused) {
                this.tl.play()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
    padding: 0 10px 10px;

    // padding-bottom: 0;
    transition: all 0.2s;
}
:deep(.el-card__header) {
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    padding: 15px;
    &::after {
        font-family: element-icons !important;
        font-style: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
}
.is-collapse {
    .el-card__header {
        border-bottom-color: transparent;
    }
    .el-card__body {
        padding-bottom: 0;
    }
}
</style>
